<template>
  <div ref="appWrapperRef" :class="['app-wrapper', classes]">
    <!-- 侧边栏 -->
    <nav-vertical v-show="!settings.hiddenSideBar"></nav-vertical>
    <div class="main-container">
      <template v-if="fixedHeader">
        <!-- 头部 -->
        <lay-header></lay-header>
        <!-- 主体内容 -->
        <lay-content></lay-content>
      </template>
      <el-scrollbar v-else>
        <!-- 头部 -->
        <lay-header></lay-header>
        <!-- 主体内容 -->
        <lay-content :fixed-header="fixedHeader"></lay-content>
      </el-scrollbar>
    </div>
    <!-- 系统设置 -->
    <lay-setting></lay-setting>
  </div>
</template>
<script setup lang="ts">
import NavVertical from "./components/LaySidebar/NavVertical.vue";
import LayHeader from "./components/LayHeader/index.vue";
import LayContent from "./components/LayContent/index.vue";
import LaySetting from "./components/LaySetting/index.vue";
import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useResizeObserver } from "@/hooks/useResizeObserver";
import { deviceDetection } from "@/utils/validate";
import { ref, computed } from "vue";
const settings = useSettingStoreHook();
const sidebar = computed(() => {
  return useAppStoreHook().sidebar;
});
const classes = computed(() => {
  return {
    hideSidebar: !sidebar.value.opened,
    openSidebar: sidebar.value.opened,
    withoutAnimation: sidebar.value.withoutAnimation
  };
});
const appWrapperRef = ref();
const isMobile = deviceDetection();

function toggle(device: string, bool: boolean) {
  useAppStoreHook().toggleDevice(device);
  useAppStoreHook().toggleCollapse(bool, "resize");
}

// 判断是否可自动关闭菜单栏
let isAutoCloseSidebar = true;

useResizeObserver(appWrapperRef, (entries) => {
  if (isMobile) return;
  // 监听屏幕大小变化
  const entry = entries[0];
  const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
  console.log(width, height, "width height");
  width <= 768 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
  /** width app-wrapper类容器宽度
   * 0 < width <= 760 隐藏侧边栏
   * 760 < width <= 990 折叠侧边栏
   * width > 990 展开侧边栏
   */
  if (width > 0 && width <= 760) {
    toggle("mobile", false);
    isAutoCloseSidebar = true;
  } else if (width > 760 && width <= 990) {
    if (isAutoCloseSidebar) {
      toggle("desktop", false);
      isAutoCloseSidebar = false;
    }
  } else if (width > 990 && !sidebar.value.isClickCollapse) {
    toggle("desktop", true);
    isAutoCloseSidebar = true;
  } else {
    toggle("desktop", false);
    isAutoCloseSidebar = false;
  }
});

function setTheme(layoutModel: string) {
  window.document.body.setAttribute("layout", layoutModel);
  // $storage.layout = {
  //   layout: `${layoutModel}`,
  //   theme: $storage.layout?.theme,
  //   darkMode: $storage.layout?.darkMode,
  //   sidebarStatus: $storage.layout?.sidebarStatus,
  //   epThemeColor: $storage.layout?.epThemeColor,
  //   themeColor: $storage.layout?.themeColor,
  //   overallStyle: $storage.layout?.overallStyle
  // };
}
// 是否固定头部
const fixedHeader = computed(() => {
  return true;
});
</script>
<style scoped lang="scss">
.app-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  &::after {
    display: table;
    clear: both;
    content: "";
  }

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
</style>
